import React, { useEffect } from 'react';
import './Option.css';

// 列表项
export default function Option(props) {
  const { prefix, value, label, defaultValue, handleClick } = props;
  // defaultValue 主要用于判断是否是默认选中
  useEffect(() => {
    if (defaultValue === value) {
      handleClick({ value, label });
    }
  }, []);

  return (
    <div
      className={`OptionsItem`}
      onClick={() => handleClick({ value, label })}
      style={defaultValue === value ? { background: '#e6f7ff', fontWeight: 600 } : {}}
    >
      {prefix && <span className="OptionsPrefix">{prefix}</span>}
      <div className="OptionsValue">{label}</div>
    </div>
  );
}
